<template>
  <div class="action">{{ action }}</div>
  <van-cell v-for="item in list" :key="item.id" :title="item.showContent" @click="clickHandle(item)" is-link />
  <p class="align-center mt-40"><router-link class="blue-1" to="/needKnow">投诉须知</router-link></p>
</template>

<script>
import { reactive, toRefs, onMounted } from 'vue';
import { useRouter, onBeforeRouteUpdate } from 'vue-router';
import { suggestionSubmit } from '@/api/activity';
import { Cell, CellGroup } from 'vant';

export default {
  name: 'Feedback',
  components: {
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
  },
  props: {
    activityId: String,
  },
  setup(props) {
    const wxUserInfo = window.wxUserInfo;
    const router = useRouter();
    const state = reactive({
      action: '',
      list: [],
    });
    const clickHandle = async (item) => {
      const { children, content } = item;
      if (children.length === 0) {
        const res = await suggestionSubmit({
          activityId: props.activityId,
          content: content,
          openId: wxUserInfo.openid || wxUserInfo.openId,
          userName: wxUserInfo.nickname,
          userAvatar: wxUserInfo.headimgurl,
        });
        if (res.data === true) {
          router.replace({ name: 'FeedbackSubmitted' });
        }
      } else {
        let action = children.length <= 1 ? '你可以：' : '请选择哪一类违法内容：';
        let list = children;
        sessionStorage.setItem('FeedbackOption', JSON.stringify({ action, list }));
        router.replace({ name: 'FeedbackOption', query: { t: new Date().getTime() } });
      }
    };
    onMounted(() => {
      const tmp = JSON.parse(sessionStorage.getItem('FeedbackOption'));
      state.action = tmp.action;
      state.list = tmp.list || [];
    });
    onBeforeRouteUpdate(() => {
      const tmp = JSON.parse(sessionStorage.getItem('FeedbackOption'));
      state.action = tmp.action;
      state.list = tmp.list || [];
    });
    return {
      ...toRefs(state),
      clickHandle,
    };
  },
};
</script>

<style scoped>
.action {
  color: #929292;
  padding: 5px 15px;
}
</style>
